import { createBrowserRouter, Navigate } from "react-router-dom"; // createBrowserRouter用于创建浏览器路由，Navigate用于重定向
import { lazy, Suspense } from "react"; // lazy用于懒加载组件，Suspense用于显示加载中效果
import { Skeleton } from "antd"; // Skeleton用于骨架屏
import PrivateRouter from "./PrivateRouter";

const Login = lazy(() => import("@/pages/Login"));
const NotFind = lazy(() => import("@/pages/NotFind"));
const Editor = lazy(() => import("@/pages/Editor"));
const Layout = lazy(() => import("@/pages/HomeLayout"));
const Home = lazy(() => import("@/pages/Home"));
const Article = lazy(() => import("@/pages/Article"));
const User = lazy(() => import("@/pages/User"));
const Author = lazy(() => import("@/pages/Author"));
const UserInfoChange = lazy(() => import("@/pages/UserInfoChange"));
const TestComponent = lazy(() => import("@/pages/TestComponent"));

/*
  |-login登录页
  |-editor草稿页
  |-layout首页布局
    |-home首页
    |-user用户详情也
    |-article文章详情页面
*/

const router = createBrowserRouter([
  {
    path: "/test",
    element: (
      <Suspense fallback={<Skeleton />}>
        <TestComponent></TestComponent>
      </Suspense>
    ),
  },
  {
    // 重定向到首页
    path: "/",
    element: <Navigate to="/layout/home" />,
  },
  {
    // 登录页路由
    path: "/login",
    element: (
      <Suspense fallback={<Skeleton />}>
        <Login />
      </Suspense>
    ),
  },
  {
    // 编辑器页面路由
    path: "/editor",
    element: (
      <PrivateRouter>
        <Suspense fallback={<Skeleton />}>
          <Editor />
        </Suspense>
      </PrivateRouter>
    ),
  },
  {
    // 首页布局路由重定向
    path: "/layout",
    element: <Navigate to="/layout/home" />,
  },
  {
    // 首页布局路由
    path: "/layout",
    element: (
      <Suspense fallback={<Skeleton />}>
        <Layout />
      </Suspense>
    ),
    children: [
      {
        // 修改用户信息路由
        path: "/layout/userinfochange",
        element: (
          <PrivateRouter>
            <Suspense fallback={<Skeleton />}>
              <UserInfoChange />
            </Suspense>
          </PrivateRouter>
        ),
      },
      {
        // 首页路由
        path: "/layout/home",
        element: (
          <Suspense fallback={<Skeleton />}>
            <Home />
          </Suspense>
        ),
      },
      {
        // 文章详情路由
        path: "/layout/article",
        element: (
          <Suspense fallback={<Skeleton />}>
            <Article />
          </Suspense>
        ),
      },
      {
        // 用户详情路由
        path: "/layout/user",
        element: (
          <PrivateRouter>
            <Suspense fallback={<Skeleton />}>
              <User />
            </Suspense>
          </PrivateRouter>
        ),
      },
      {
        // 作者详情路由
        path: "/layout/author",
        element: (
          <Suspense fallback={<Skeleton />}>
            <Author />
          </Suspense>
        ),
      },
    ],
  },
  {
    path: "*",
    element: <NotFind />,
  },
]);

export default router;
